<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>可编辑文件列表</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
    <script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="${base}/js/bootstrap.js"></script>
    <script>
    $(document).ready(function (){
		alert("11");
		
		var param = "templateId=1001";
		$.ajax({
			url : "${base}/tpl/create",
			data : param,
			dataType : "json",
			type : "POST",
			success : function(data) {
				
				alert(data[0].colName);
				var theadVal = "<thead><tr>";
				var tbodyVal = "<tbody><tr>";
				$.each(data,
						function(i, item) {
							theadVal = theadVal + "<th>" + data[i].colName
									+ "</th>";
							if (data[i].colType == 0) {//文本框类型
								tbodyVal = tbodyVal + "<td>" + data[i].defVal
										+ "</td>";
							} else if (data[i].colType == 1) {//下拉框类型吧
								var opts = data[i].defVal.split("||");
								var optstr = "";
								for (var j = 0; j < opts.length; j++) {
									optstr = optstr + "<option>" + opts[j]
											+ "</option>";
								}
								tbodyVal = tbodyVal + "<td><select>" + optstr
										+ "</select></td>";

							} else {
								tbodyVal = tbodyVal + "<td></td>";
							}
						});
				var infoVal = theadVal + "</tr></thead>" + tbodyVal
						+ "</tr></tbody>";
				alert(infoVal);
				$("table").append($(infoVal));
			},
			async : true,
			cache : false
		});
		
	});
   
    </script>
  </head>

  <body>
 	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>
		
		<div><table>
		</table></div>
	</div>	



 
  </body>
  <script type="text/javascript">

	function showExcel(obj){
		var filename = obj.value;
		var param = "filename=" + filename;
		console.log(filename);
		$.ajax({
			url: "${base}/excel/show",
			data: param,
			dataType: "json",
			type: "POST",
			success: function (data) {
               /*  $('#myModal').modal('show'); */
                var table = [];
                table.push('<table class="table table-condensed table table-bordered" style="width:1100px ;height:auto;border:1px solid;"  id="table"><tbody id="tbody">');
                $.each(data, function (index, tr) {
                    table.push('<tr class="tr" style="height: 30px;width: 50px">');
                    $.each(tr, function (index,td) {
                         table.push('<td class="td" style="width:50px";height:auto;"><input onchange=\"readHtml()\" type="text" style="border:none;height:35px;font-size: 10px;width:auto;word-wrap:break-word;" value='+td+' ></td>');
                     });
                    table.push('</tr>');
                });
                table.push('<input type="hidden" value='+filename+' id="filename" ></input>');
                document.getElementById('table-body').innerHTML = table.join('');
            },
			async: true,
			cache: false
		});
	}
    function addRow() {
        var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
        var rows = table.rows.length ;
        var cells = table.rows.item(0).cells.length ;
        tbody.appendChild(tr);
        for (var i = 0;i < cells;i++){
            var inputi = document.createElement('input');
            inputi.style.border = "none";
            inputi.style.height = "46px";
            inputi.style.font.size = "10px";
            var tdi = document.createElement('td');
            tdi.appendChild(inputi);
            tdi.className = "td";
            tdi.style.height = "46px";
            tdi.style.width = " 5%";
            tr.appendChild(tdi);
        }
    }
    function addCell() {
        $(".tr").append('<td style="height:30px;width:5%"class="td"><input type="text" style="border:none;height:46px;font-size:10px"></td>');
    }
    function readHtml() {
        var map = {};
        var rows = table.rows.length ;
        var cells = table.rows.item(0).cells.length ;
        for (var i = 0;i < rows;i++ ){
            var cellValue = [];
            for (var j = 0;j < cells;j++ ){
				valuej =  table.rows.item(i).cells.item(j).childNodes[0].value;
                cellValue[j] = valuej;
			}
			map[i.toString()]= cellValue;
		}
		var json = JSON.stringify(map);
        var params = JSON.stringify(json);

        var filename  = $("#filename").val();
        console.log(filename);
        $.ajax({
            url: "${base}/excel/write",
            data: {
                "json": params,"filename":filename
			},
            type: "POST",
           success: function () {
			alert("更新成功");
		   },
            async: true,
            cache: false
        });
    }
    function deleteExcel(obj) {
	    var filename = obj.value;
        var param = "filename=" + filename;
        if (confirm("确认删除"+filename+"吗？")){
			$.ajax({
				url: "${base}/excel/delete",
				data: param,
				dataType: "json",
				type: "POST",
				success: function (data) {
					//Location.href = "${base}/excel/list";
					alert("删除成功");
                    location.reload();
				},
				async: true,
				cache: false
				});
        }
    }
    $(".trr").bind("mouseover",function(){
        $(this).css("background-color","#eeeeee");
    })
    $(".trr").bind("mouseout",function(){
        $(this).css("background-color","#ffffff");
    })
  </script>	
</html>


